<template>
  <div class="box">
    <div class="main pb10">
      <div class="condition">
        <div class="f aic mb30">
          <div class="f16 bold">科目：</div>
          <div class="f condition-item">
            <div @click="changeSubject(null)" :class="{ active: !subject }">
              全部
            </div>
            <div
              v-for="(dict, index) in subjectList"
              @click="changeSubject(dict.dictValue)"
              :class="{ active: subject == dict.dictValue }"
            >
              {{ dict.dictLabel }}
            </div>
          </div>
        </div>
        <div class="f aic">
          <div class="f16 bold">类型：</div>
          <div class="f condition-item">
            <div @click="changeType(null)" :class="{ active: !courseType }">
              全部
            </div>
            <div
              v-for="(dict, index) in courseTypeList"
              @click="changeType(dict.dictValue)"
              :class="{ active: courseType == dict.dictValue }"
            >
              {{ dict.dictLabel }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div v-if="showList" class="main pt50" style="min-height: 590px">
    <div class="f fw">
      <div
        v-for="(item, index) in courseList"
        :key="index"
        class="course-item pointer"
        @click="goPath(item.id)"
      >
        <img :src="item.courseCover" alt="" width="100%" height="152" />
        <div class="f14 pl10 pr10 pt13 pb20">
          <div class="mb10 tem">{{ item.courseName }}</div>
          <div class="course-content tem3">
            {{ item.courseDesc }}
          </div>
          <div class="course-content mt10 mb10 f jcsb aic">
            课时 · {{ item.totalHours }}课时
            <el-tag type="danger" color="#f01414" effect="dark">
              立即练习
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="queryParams.pageSize"
        @current-change="queryParams.pageNum"
        layout="total, prev, pager, next, jumper"
        :page-size="8"
        hide-on-single-page
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
  <div v-else style="min-height: 590px">
    <el-empty description="暂无习题" />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { getCourseListAuth, getDictOption } from "@/api/course";

const baseUrl = import.meta.env.VITE_APP_STATIC_BASE_API;

const router = useRouter();

const subject = ref(null);
const courseType = ref(null);
const total = ref(0);
const subjectList = ref([]);
const courseTypeList = ref([]);
let showList = ref(true);

const queryParams = ref({
  pageSize: 8,
  pageNum: 1,
  isStatus: 1,
  courseSubject: undefined,
  courseType: undefined,
});
const courseList = ref([]);

const getCourseListData = () => {
  getCourseListAuth(queryParams.value).then((res) => {
    courseList.value = res.rows;
    total.value = res.total;
    if (res.total == 0) {
      showList.value = false;
    } else {
      showList.value = true;
    }
  });
};

const getSubjectOption = () => {
  getDictOption("subject").then((res) => {
    subjectList.value = res.data;
  });
};

const getCourseTypeOption = () => {
  getDictOption("course_type").then((res) => {
    courseTypeList.value = res.data;
  });
};

const changeSubject = (type) => {
  queryParams.value.courseSubject = type;
  subject.value = type;
  queryParams.value.pageNum = 1;
  getCourseListData();
};

const changeType = (type) => {
  queryParams.value.courseType = type;
  courseType.value = type;
  queryParams.value.pageNum = 1;
  getCourseListData();
};

const goPath = (id) => {
  router.push({
    path: "/exercise",
    query: { id: id },
  });
};

onMounted(() => {
  getCourseListData();
  getSubjectOption();
  getCourseTypeOption();
});
</script>
<style lang="scss" scoped>
.box {
  background: #f5f7fa;
}
.main {
  width: 1154px;
  margin: 0 auto;
  padding: 80px 0 15px;
  .condition {
    font-size: 14px;
    padding: 40px 0 30px;
    .condition-item {
      color: #646464;
      > div {
        padding: 7px 8px;
        border-radius: 5px;
        cursor: pointer;
        margin-right: 10px;
        &:hover {
          color: #f01414;
        }
        &.active {
          background: #f01414;
          color: #fff;
        }
      }
    }
  }

  // 内容
  .course-item {
    width: 272px;
    // height: 282px;
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    color: #6e747a;
    margin-right: 22px;
    margin-bottom: 22px;
    box-shadow: 0 0 10px 3px rgba(208, 208, 208, 0.3);
    &:nth-child(4n) {
      margin-right: 0;
    }
    .course-content {
      line-height: 24px;
      opacity: 0.7;
      &.tem3 {
        height: 24 * 3px;
      }
    }
    &:hover {
      box-shadow: 0 0 10px 3px rgba(208, 208, 208, 0.7);
    }
  }
  .Pagination {
    display: flex;
    justify-content: right;
    width: 100%;
  }
}
</style>
